<template>
	<view class="regulation-detail">
		<view class="top-cover-wrapper">
			<u-image
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/42b3ba8f-dafb-4b3c-a186-a70c64c7808c.png"
				width="100%" height="100%" />
		</view>
		<view class="regulation-detail-main">
			<view class="regulation-item">
				<u-collapse :arrow="false">
					<u-collapse-item :title="chapterItem.chapter" @change="change($event,chapterItem)" v-for="chapterItem,chapterIndex in regulationList" :key="chapterItem.id">
						<view class="item-title" slot="title" :class="{'bottom-line':chapterIndex != regulationList.length-1}">
							<view class="icon-wrapper">
								<u-icon name="arrow-down-fill" class="arrow-icon" :class="{'active':chapterItem.active}"
									size="16" v-if="chapterItem.son_chapter.length">
								</u-icon>
								<view class="tag" v-else/>
							</view>
							<view class="title-value">
								{{chapterItem.chapter}}
							</view>
						</view>
						<view class="chapter-list-wrapper" slot="content" v-if="chapterItem.son_chapter.length">
							<u-collapse accordion :arrow="false" v-for="subCprItem,subCprIndex in chapterItem.son_chapter" :key="subCprItem.id">
								<u-collapse-item :title="subCprItem.chapter" :key="subCprItem.id">
									<view class="item-title" slot="title" :class="{'bottom-line':false}" style="padding:24rpx 0rpx 24rpx 0rpx">
										<view class="icon-wrapper">
											<u-icon name="arrow-down-fill" class="arrow-icon"
												:class="{'active':subCprItem.active}" size="16" v-if="subCprItem.son_chapter.length">
											</u-icon>
											<view class="tag" v-else/>
										</view>
										<view class="title-value">
											{{subCprItem.chapter}}
										</view>
									</view>
									<view class="sub-chapter-list-wrapper" slot="content" v-if="subCprItem.son_chapter.length">
										<view class="sub-chapter-item" v-for="regItem in subCprItem.son_chapter" :key="regItem.id" @click="$u.route(`/pages_recommended/law_regulation/lawRegulation?id=${regItem.id}&chargename=${regItem.chapter}&type=2`)">
											{{regItem.chapter}}
										</view>
									</view>
								</u-collapse-item>
							</u-collapse>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props:{
			regulationList:{
				type:Array,
			}
		},
		data(){
			return {
				
			}
		},
		methods:{
			change(index){
				console.log(index)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./regulationDetail.scss";
</style>
